<!-- #region setup -->
<script lang="ts" setup>
import { BytTableCard } from '@byt/components';
import { ref } from 'vue';
import {NButton,NDataTable} from 'naive-ui';
const initColumn = ()=>{
    return  [
    {
      title: 'No',
      key: 'no',
      width:100
    },
    {
      title: 'Title',
      key: 'title'
    },
    {
      title: 'Length',
      key: 'length'
    },
    {
      title: 'Action',
      key: 'actions'
    }
  ]
}
//表格列
const columns = ref(initColumn())

const tableSize = ref('medium');
const data = [
  { no: 3, title: 'Wonderwall', length: '4:18' },
  { no: 4, title: 'Don\'t Look Back in Anger', length: '4:48' },
  { no: 12, title: 'Champagne Supernova', length: '7:27' }
]
</script>
<!-- #endregion setup -->

<!-- #region first -->
<BytTableCard
        title="表格布局组件"
        v-model:listData="columns"
        :initColumns="initColumn()"
        v-model:size="tableSize">
<n-data-table
          remote
          :columns="columns"
          :data="data"
          :size="tableSize"
          style="height:100%; width:100%"/>
</BytTableCard>
<!-- #endregion first -->
